<template>
  <div class="departments">
    <el-card>
      <el-tabs>
        <el-tab-pane label="组织架构">
          <div class="main">
            <TreeItem :item="topItem" />
            <hr>
            <!-- 树形控件 -->
            <el-tree :data="treeData" :props="{ lable: 'name' }">
              <template v-slot="{ data }">
                <TreeItem style="width: 100%" :item="data" />
              </template>
            </el-tree>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <Add :init-data="initData" />
  </div>
</template>

<script>
import Add from './components/add.vue'
import TreeItem from './components/TreeItem'
import { getDepartment } from '@/api/departments.js'
export default {
  components: {
    TreeItem,
    Add
  },
  data() {
    return {
      treeData: [],
      topItem: { name: '', manager: '负责人', isTop: true, id: '' }
    }
  },
  created() {
    this.departmentData()
  },
  methods: {
    async departmentData() {
      const res = await getDepartment()
      this.topItem.name = res.data.companyName
      this.initData = res.data.depts
      this.treeData = this.changeData(res.data.depts, '')
      console.log(res)
    },
    changeData(arr, pid) {
      return arr.filter((item) => {
        if (item.pid === pid) {
          item.children = this.changeData(arr, item.id)
          return true
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.departments {
  padding: 20px;
  .main {
    width: 80%;
    margin: 30px auto 0;
  }
}
</style>
